<template>
    <el-container class="form-designer-container">
        <el-header height="55px" style="border-bottom: 1px dashed #EBEEF5;">
            <Header/>
        </el-header>
        <el-container >
            <el-aside width="260px" style="border-right: 1px dashed #EBEEF5;margin-right: 2px;">
                <Widget :designer="state.designer"/>
            </el-aside>
            <el-container class="main-container-layout">
                <el-header height="40px" style="border-bottom: 1px dashed #EBEEF5;">
                    <Toolbar 
                        :designer="state.designer"
                        :form-config="state.designer.formConfig"
                        />
                </el-header>
                <el-main class="main-container">
                    <div>
                        <el-scrollbar :height="state.scrollHeight" :class="[getLayoutType+'-layout']">
                            <FormWidget 
                                :designer="state.designer" 
                                :form-config="state.designer.formConfig"
                                :select-widget="state.designer.selectWidget"
                            />  
                        </el-scrollbar>
                    </div>
                </el-main>
            </el-container>
            <el-aside width="300px" style="border-left: 1px dashed #EBEEF5;">
                <Setting 
                    :designer="state.designer"
                    :form-config="state.designer.formConfig"
                    :select-widget="state.designer.selectWidget"
                />
            </el-aside>
        </el-container>
    </el-container>
</template>

<script setup >
import { onBeforeMount, onMounted, onUnmounted, reactive,getCurrentInstance ,computed, watch} from 'vue'
import Header from './header/index.vue'
import Widget from './widget/index.vue'
import Toolbar from './toolbar/index.vue'
import Setting from './setting/index.vue'
import FormWidget from './form-widget/index.vue'
import { throttle } from 'lodash-es'
import { createFormDesigner } from './formDesigner.js'
import {useDesignerStore} from '@/stores/desginer.js'
const state = reactive({
    scrollHeight:'0px',
    designer:{}
})

const useDesigner = useDesignerStore()


watch(
    [()=>state.designer.formConfig,
    ()=>state.designer.widgetList
    ],
    ()=>{
        useDesigner.setDesigner({
            formConfig:state.designer.formConfig,
            widgetList:state.designer.widgetList
        })
    },
    {
        deep:true
    }
)

const getLayoutType = computed(()=>{
    return state.designer.formConfig.layoutType || 'PC'
})

onBeforeMount(()=>{
    state.designer = createFormDesigner(getCurrentInstance().proxy)
})

const setScrollHeihgt = throttle((e)=>{
    state.scrollHeight = e.target.innerHeight - 135 + 'px'
},300)

onMounted(()=>{
    state.scrollHeight = window.innerHeight - 135 + 'px'
    window.addEventListener('resize',setScrollHeihgt)
})
onUnmounted(()=>{
    window.removeEventListener('resize',setScrollHeihgt)
})
</script>

<style lang="scss" scoped>
.form-designer-container{
    height: 100%;
}
.main-container{
    overflow-x: hidden;
    position: relative;
    padding: 0;
    background: #f1f2f3;
    &>div{
        margin: 20px;
    }
}

.el-main {
    &.main-container{
        min-width: 650px;
    }
}
.el-scrollbar{
    border-radius: 15px;
    background-color: #fff;
    &.H5-layout{
        margin: 0 auto;
        width: 420px;
        border-radius: 10px;
        //border-width: 10px;
        box-shadow: 0 0 1px 10px #495060;
    }
}

</style>
